<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <h2>这是一个根组件</h2>

    <hr>
    <h2>这是一个home组件</h2>
    <v-home></v-home>

    <hr>
    <h2>这是一个new组件</h2>
    <v-new></v-new>

    <hr>
    <h2>这是一个Life组件</h2>
    <v-life></v-life>

    <hr>
  </div>
</template>

<script>
  /**
   * 1. 引入组件
   * 2. 挂载组件
   * 3. 在模板中使用
  
   4.生命周期函数
    组件挂载，组件更新，以及组件销毁时触发的一系列方法，这些方法就是生命周期函数（生命钩子函数）
   *
   */
  import Home from "./components/Home.vue";
  import New from "./components/New.vue";

  import Life from "./components/life.vue";
  export default {
    name: "app",
    data() {
      return {
        msg: "欢迎来到vue"
      };
    },
    // 挂载组件
    components: {
      "v-home": Home,
      "v-new": New,
      "v-life": Life
    }
  };
</script>

<style lang="scss">
</style>